<template>
    <div id="myMain">
      <el-row :gutter="40">
        <el-col :span="6" v-for="(item, index) in topList" :key="index"><div class="grid-content displayFlexR">
          <div class="left fl">
              <i class="el-icon-s-order"></i>
          </div>
          <div class="right fr">
              <p>{{item.a}}<span>{{item.c}}</span></p>
              <span>{{item.b}}</span>
          </div>
        </div></el-col>
      </el-row>
      <div class="chart">
        <div class="part1 fl">
          <div class="part1-top">
            <span class="myTitle">新闻公告</span>
          </div>
          <div v-for="(item, index) in newsList" :key="index">
              <p>{{item.title}} <span class="fr" @click="toDetails(item)">详情<i class="el-icon-arrow-right"></i></span></p>
              <el-divider></el-divider>
          </div>
        </div>
        <div class="part1 fl">
          <div class="part1-top">
            <span class="myTitle">招商发布</span>
            <!-- <vxe-button class="fr">年</vxe-button>
            <vxe-button class="fr">月</vxe-button>
            <vxe-button class="fr">周</vxe-button> -->
            <el-radio-group v-model="ReleseTabPosition" class="fr">
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
              <el-radio-button label="year">年</el-radio-button>
            </el-radio-group>
          </div>
          <Recruit ref="releseData"></Recruit>
        </div>
        <div class="part1 fl">
          <div class="part1-top">
            <span class="myTitle">房源数量</span>
            <!-- <vxe-button class="fr">年</vxe-button>
            <vxe-button class="fr">月</vxe-button>
            <vxe-button class="fr">周</vxe-button> -->
            <el-radio-group v-model="HouseTabPosition" class="fr">
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
              <el-radio-button label="year">年</el-radio-button>
            </el-radio-group>
          </div>
          <HouseNum ref="houseData"></HouseNum>
        </div>
        <div class="part1 fl">
          <div class="part1-top">
            <span class="myTitle">企业入驻数</span>
            <!-- <vxe-button class="fr">年</vxe-button>
            <vxe-button class="fr">月</vxe-button>
            <vxe-button class="fr">周</vxe-button> -->
            <el-radio-group v-model="firmTabPosition" class="fr">
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
              <el-radio-button label="year">年</el-radio-button>
            </el-radio-group>
          </div>
          <SettleInNum ref="firmData"></SettleInNum>
        </div>
      </div>
    </div>
</template>
<style lang="scss" scoped>
@import '../../styles/all';
.myTitle{
    font-weight: bold;
    font-size: 16px !important;
    color: cornflowerblue;
}
#myMain{
  overflow: hidden;
  .el-col{
    .grid-content {
      border-radius: 4px;
      background-color: white;
      min-height: 36px;
    }
    .left{
        flex: 1;
        background-color: RGB(68,150,192);
        position: relative;
        text-align: center;
        i{
            font-size: 40px !important;
            color: #fff;
            position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
        }
    }
    .right{
      flex: 1;
      padding: 30px;
      text-align: center;
      p:nth-of-type(1){
        font-size: 28px !important;
      }
    }
  }
  .chart{
    margin-top: 20px;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .part1{
      width: calc( 50% - 10px);
      height: 500px;
      background-color: white;
      border-radius: 5px;
      margin-bottom: 20px;
      margin-right: 20px;
      padding: 20px;
      .vxe-button{
        margin: 0;
      }
      .part1-top{
        height: 40px;
        line-height: 40px;
      }
    }
    .part1:nth-of-type(n+3){
      margin-bottom: 0px;
    }
    .part1:nth-of-type(even){
      margin-right: 0px;
    }
  }
}
</style>
<script>
import Cookies from 'js-cookie'
import Recruit from './Recruit'
import HouseNum from './house_num'
import SettleInNum from './SettleInNum'
import { getIndexFourInfo, getFirmWeekInfo, getFirmMonthInfo, getFirmYearInfo,
 getHouseWeekInfo, getHouseMonthInfo, getHouseYearInfo,
 getReleseWeekInfo, getReleseMonthInfo, getReleseYearInfo } from '@/api/myIndex'
import { getApprovalInfo } from '@/api/newsAndNotice'

export default {
    props: {
    },
    components:{
      Recruit,
      HouseNum,
      SettleInNum
    },
    data(){
        return{
          topList:[
              {
              a: '21302',
              b: '招商发布数',
              c: '个'
            },{
              a: '21302',
              b: '入驻企业数',
              c: '个'
            },{
              a: '21302',
              b: '房源数量',
              c: '套'
            },{
              a: '21302',
              b: '营收情况',
              c: '元'
            }
          ],
          newsList:[
              {
                title: '海地第一夫人遇袭后首发声!'
            },
            {
                title: '美将中国实体列入“清单” 中方回应!'
            },
            {
                title: '陕西新增1例本土无症状感染者!'
            }
          ],
          // firm
          FirmListDate:[],
          FirmListCount: [],
          firmTabPosition: 'month',
          // house
          HouseListDate:[],
          HouseListCount0: [],
          HouseListCount1: [],
          HouseTabPosition: 'month',
          // relese
          ReleseListDate:[],
          ReleseListCount: [],
          ReleseTabPosition: 'month',
        }
    },
    watch:{
      // firm
      firmTabPosition(val, oldVal){
        if(val == 'week'){
          this.getFirmInfoByWeek()
        } else if (val == 'month'){
          this.getFirmInfoByMonth()
        } else{
          this.getFirmInfoByYear()
        }
      },
      //house
      HouseTabPosition(val, oldVal){
        if(val == 'week'){
          this.getHouseInfoByWeek()
        } else if (val == 'month'){
          this.getHouseInfoByMonth()
        } else{
          this.getHouseInfoByYear()
        }
      },
      // relese
      ReleseTabPosition(val, oldVal){
        if(val == 'week'){
          this.getReleseInfoByWeek()
        } else if (val == 'month'){
          this.getReleseInfoByMonth()
        } else{
          this.getReleseInfoByYear()
        }
      },

    },
    methods:{
      // top 
      getFourInfo(){
        getIndexFourInfo().then(res => {
          // console.log("top four res", res)
          this.topList[0]['a'] = res.issueCount
          this.topList[1]['a'] = res.firmCount
          this.topList[2]['a'] = res.houseCount
        })
      },
      // news and notice
      getNewsAndNoticeInfo(){
        getApprovalInfo(1, 8, 1).then(res => {
          // console.log('relese newsw and notice res', res)
          this.newsList = res.data
        })
      },
      // news details
      toDetails(data){
        if (data.status == 0) {
          // 新闻
          this.$router.push({path: '/news/news_consult/newsinfo_details', query:{data: data}})
        } else {
          // 公告
          this.$router.push({path: '/news/Notice_push/Noticeinfo_details', query:{data: data}})
        }
      },
      // firm
      getFirmInfoByWeek(){
        getFirmWeekInfo().then(res => {
          // console.log("firm week res", res)
          this.FirmListDate = res.listDate
          this.FirmListCount = res.listCount
          this.$refs.firmData.get_SettleInNum(this.FirmListDate, this.FirmListCount)
        })
      },
      getFirmInfoByMonth(){
        getFirmMonthInfo().then(res => {
          // console.log("firm month res", res)
          this.FirmListDate = res.listDate
          this.FirmListCount = res.listCount
          this.$refs.firmData.get_SettleInNum(this.FirmListDate, this.FirmListCount)
        })
      },
      getFirmInfoByYear(){
        getFirmYearInfo().then(res => {
          // console.log("firm year res", res)
          this.FirmListDate = res.listDate
          this.FirmListCount = res.listCount
          this.$refs.firmData.get_SettleInNum(this.FirmListDate, this.FirmListCount)
        })
      },
      // house
      getHouseInfoByWeek(){
        getHouseWeekInfo().then(res => {
          // console.log("house week res", res)
          this.HouseListDate = res.listDate
          // listCount0 未出租  listCount1 已出租
          this.HouseListCount0 = res.listCount0
          this.HouseListCount1 = res.listCount1
          this.$refs.houseData.get_house_num(this.HouseListDate, this.HouseListCount0, this.HouseListCount1)
        })
      },
      getHouseInfoByMonth(){
        getHouseMonthInfo().then(res => {
          // console.log("house month res", res)
          this.HouseListDate = res.listDate
          this.HouseListCount0 = res.listCount0
          this.HouseListCount1 = res.listCount1
          this.$refs.houseData.get_house_num(this.HouseListDate, this.HouseListCount0, this.HouseListCount1)
        })
      },
      getHouseInfoByYear(){
        getHouseYearInfo().then(res => {
          // console.log("house year res", res)
          this.HouseListDate = res.listDate
          this.HouseListCount0 = res.listCount0
          this.HouseListCount1 = res.listCount1
          this.$refs.houseData.get_house_num(this.HouseListDate, this.HouseListCount0, this.HouseListCount1)
        })
      },
      // relese  
      getReleseInfoByWeek(){
        getReleseWeekInfo().then(res => {
          // console.log("relese week res", res)
          this.ReleseListDate = res.listDate
          this.ReleseListCount = res.listCount
          this.$refs.releseData.get_recruit(this.ReleseListDate, this.ReleseListCount)
        })
      },
      getReleseInfoByMonth(){
        getReleseMonthInfo().then(res => {
          // console.log("relese month res", res)
          this.ReleseListDate = res.listDate
          this.ReleseListCount = res.listCount
          this.$refs.releseData.get_recruit(this.ReleseListDate, this.ReleseListCount)
        })
      },
      getReleseInfoByYear(){
        getReleseYearInfo().then(res => {
          // console.log("relese year res", res)
          this.ReleseListDate = res.listDate
          this.ReleseListCount = res.listCount
          this.$refs.releseData.get_recruit(this.ReleseListDate, this.ReleseListCount)
        })
      },
    },
    created(){},
    mounted(){
      this.$store.dispatch('user/getInfo').then(res => {
        Cookies.set('parkId', res.user.parkId)
      })
      
      this.getFourInfo()
      this.getNewsAndNoticeInfo()
      this.getFirmInfoByMonth()
      this.getHouseInfoByMonth()
      this.getReleseInfoByMonth()
    },
}
</script>